<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>茶叶资产溯源管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            padding-top: 20px;
            background-color: #f5f7f9;
            font-family: 'Noto Sans SC', sans-serif;
            color: #343a40;
            line-height: 1.6;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            margin-top: 40px;
            margin-bottom: 40px;
        }
        .card {
            margin-bottom: 20px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
            border: none;
            border-radius: 8px;
            transition: transform 0.2s, box-shadow 0.2s;
            overflow: hidden;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background: linear-gradient(135deg, #3a8c5f 0%, #2a6d45 100%);
            color: white;
            border-bottom: none;
            padding: 15px 20px;
            font-weight: 500;
            font-size: 1.1rem;
            letter-spacing: 0.5px;
        }
        .card-body {
            padding: 25px;
            background-color: #fff;
        }
        .btn-tea {
            background: linear-gradient(135deg, #3a8c5f 0%, #2a6d45 100%);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 6px;
            font-weight: 500;
            letter-spacing: 0.5px;
            transition: all 0.3s;
            box-shadow: 0 3px 6px rgba(42, 109, 69, 0.2);
        }
        .btn-tea:hover {
            background: linear-gradient(135deg, #2a6d45 0%, #1a5535 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(42, 109, 69, 0.3);
        }
        .btn-tea:active {
            transform: translateY(1px);
        }
        .btn-secondary {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            border: none;
            font-weight: 500;
            letter-spacing: 0.5px;
            box-shadow: 0 3px 6px rgba(108, 117, 125, 0.2);
            transition: all 0.3s;
        }
        .btn-secondary:hover {
            background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
            transform: translateY(-2px);
            box-shadow: 0 5px 10px rgba(108, 117, 125, 0.3);
        }
        .btn-secondary:active {
            transform: translateY(1px);
        }
        #resultArea {
            max-height: none;
            min-height: 150px;
            padding: 20px !important;
            background-color: #f8fafc;
            border-radius: 8px;
            color: #495057;
            font-size: 0.95rem;
        }
        .result-container {
            background-color: #fff;
            border-radius: 8px;
            padding: 0;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            overflow: hidden;
        }
        .result-container .card {
            margin-bottom: 15px;
            border: none;
            box-shadow: none;
        }
        .result-container .card:hover {
            transform: none;
        }
        .result-container .card-header {
            border-radius: 0;
        }
        .result-container .alert {
            margin-bottom: 15px;
            border-radius: 6px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
            font-size: 0.95rem;
        }
        .help-text {
            font-size: 0.85rem;
            color: #6c757d;
            margin-top: 8px;
            font-style: italic;
        }
        .alert-info {
            background-color: rgba(209, 236, 241, 0.5);
            border-color: rgba(23, 162, 184, 0.3);
            color: #0c5460;
            font-size: 0.9rem;
            padding: 15px;
            margin-top: 15px;
            border-radius: 6px;
        }
        .copy-btn {
            margin-left: 10px;
            padding: 8px 12px;
            font-size: 0.85rem;
            background-color: #e9ecef;
            color: #495057;
            border: 1px solid #ced4da;
            border-radius: 4px;
            transition: all 0.2s;
        }
        .copy-btn:hover {
            background-color: #dee2e6;
            color: #212529;
        }
        table.table-striped {
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
        }
        table.table-striped th {
            width: 30%;
            background-color: #f8f9fa;
            font-weight: 500;
            border-top: none;
        }
        table.table-striped td {
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }
        .badge {
            padding: 5px 8px;
            font-size: 0.8rem;
            font-weight: 500;
            border-radius: 4px;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .system-intro {
            margin-bottom: 35px;
            text-align: center;
            padding: 10px 20px;
        }
        .system-intro p {
            max-width: 800px;
            margin: 0 auto;
            color: #6c757d;
            font-size: 1.05rem;
            line-height: 1.6;
        }
        .blockchain-badge {
            display: inline-block;
            padding: 4px 10px;
            background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
            color: white;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-left: 12px;
            vertical-align: middle;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
        }
        .nav-tabs {
            border-bottom: 2px solid #e9ecef;
            margin-bottom: 25px;
        }
        .nav-tabs .nav-item {
            margin-bottom: -2px;
        }
        .nav-tabs .nav-link {
            border: none;
            color: #6c757d;
            font-weight: 500;
            padding: 12px 20px;
            border-radius: 6px 6px 0 0;
            transition: all 0.2s;
        }
        .nav-tabs .nav-link:hover {
            color: #3a8c5f;
            background-color: rgba(58, 140, 95, 0.05);
        }
        .nav-tabs .nav-link.active {
            color: #3a8c5f;
            background-color: transparent;
            border-bottom: 3px solid #3a8c5f;
        }
        .nav-pills .nav-link.active {
            background: linear-gradient(135deg, #3a8c5f 0%, #2a6d45 100%);
            box-shadow: 0 3px 6px rgba(42, 109, 69, 0.2);
        }
        .nav-pills .nav-link {
            color: #495057;
            padding: 10px 20px;
            font-weight: 500;
            border-radius: 6px;
            transition: all 0.2s;
        }
        .nav-pills .nav-link:hover {
            color: #3a8c5f;
            background-color: rgba(58, 140, 95, 0.05);
        }
        .interface-description {
            margin: 20px 0;
            padding: 15px 20px;
            background-color: #f8f9fa;
            border-left: 4px solid #3a8c5f;
            border-radius: 0 6px 6px 0;
            font-size: 0.95rem;
            line-height: 1.6;
            color: #495057;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
        }
        .form-group label {
            font-weight: 500;
            color: #495057;
            margin-bottom: 8px;
        }
        .form-control {
            border-radius: 6px;
            border: 1px solid #ced4da;
            padding: 10px 15px;
            height: auto;
            font-size: 0.95rem;
            transition: all 0.2s;
        }
        .form-control:focus {
            border-color: #3a8c5f;
            box-shadow: 0 0 0 0.2rem rgba(58, 140, 95, 0.25);
        }
        textarea.form-control {
            min-height: 100px;
        }
        .input-group-append {
            margin-left: -1px;
        }
        h1 {
            font-weight: 700;
            letter-spacing: 0.5px;
            color: #2a6d45;
            margin-bottom: 15px;
        }
        .text-muted {
            color: #adb5bd !important;
        }
        @media (max-width: 768px) {
            .container {
                margin-top: 20px;
            }
            .card-header {
                padding: 12px 15px;
            }
            .card-body {
                padding: 20px;
            }
            .nav-tabs .nav-link {
                padding: 10px 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-2">茶叶资产溯源管理系统 <span class="blockchain-badge">区块链技术支持</span></h1>
        
        <div class="system-intro">
            <p>本系统基于FISCO BCOS区块链平台，实现茶叶资产从种植、加工到销售的全流程溯源管理</p>
        </div>
        
        <!-- 导航标签页 -->
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="customer-tab" data-toggle="tab" href="#customer" role="tab">顾客界面</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="merchant-tab" data-toggle="tab" href="#merchant" role="tab">商家界面</a>
            </li>
        </ul>
        
        <!-- 标签页内容 -->
        <div class="tab-content" id="myTabContent">
            <!-- 顾客界面 -->
            <div class="tab-pane fade show active" id="customer" role="tabpanel">
                <div class="interface-description">
                    <strong>顾客界面</strong>：用于查询茶叶资产详情，了解茶叶的产地、类型、加工过程等溯源信息。
                </div>
                <div class="card mt-3">
                    <div class="card-header">查询茶叶资产</div>
                    <div class="card-body">
                        <form id="queryAssetForm">
                            <div class="form-group">
                                <label for="queryBatchId">批次ID</label>
                                <input type="text" class="form-control" id="queryBatchId" placeholder="输入要查询的批次ID">
                            </div>
                            <button type="button" class="btn btn-tea" onclick="getTeaAssetDetails()">查询详情</button>
                        </form>
                    </div>
                </div>
                
                <!-- 茶叶资产详情显示区域 - 新增 -->
                <div id="assetDetailsContainer" class="mt-4" style="display: none;">
                    <!-- 这里将显示资产详情 -->
                </div>
            </div>
            
            <!-- 商家界面 -->
            <div class="tab-pane fade" id="merchant" role="tabpanel">
                <div class="interface-description">
                    <strong>商家界面</strong>：用于创建和管理茶叶资产，记录从生产到销售的全过程，确保茶叶来源可追溯。
                </div>
                <!-- 子导航 -->
                <ul class="nav nav-pills mt-3 mb-3" id="merchantTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="create-tab" data-toggle="pill" href="#create" role="tab">创建茶叶资产</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="update-tab" data-toggle="pill" href="#update" role="tab">更新资产信息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="transfer-tab" data-toggle="pill" href="#transfer" role="tab">资产流转</a>
                    </li>
                </ul>
                
                <!-- 商家子标签页内容 -->
                <div class="tab-content" id="merchantTabContent">
                    <!-- 创建茶叶资产 -->
                    <div class="tab-pane fade show active" id="create" role="tabpanel">
                        <div class="card">
                            <div class="card-header">创建新茶叶资产</div>
                            <div class="card-body">
                                <form id="createAssetForm">
                                    <div class="form-group">
                                        <label for="batchId">批次ID</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="batchId" required>
                                            <div class="input-group-append">
                                                <button class="btn btn-outline-secondary copy-btn" type="button" id="copyBatchIdBtn">复制到所有表单</button>
                                            </div>
                                        </div>
                                        <small class="help-text">系统会自动生成随机批次ID</small>
                                        <div class="alert alert-info">
                                            <strong>提示:</strong> 批次ID应为32字节的十六进制字符串，以"0x"开头。<br>
                                            系统会自动生成随机批次ID。查询和其他操作需使用相同的批次ID。<br>
                                            详细信息请参考<a href="README.md" target="_blank">用户手册</a>。
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="teaType">茶叶类型</label>
                                        <input type="text" class="form-control" id="teaType" placeholder="如: 龙井, 铁观音, 普洱等">
                                    </div>
                                    <div class="form-group">
                                        <label for="origin">产地</label>
                                        <input type="text" class="form-control" id="origin" placeholder="如: 杭州西湖, 安溪, 云南等">
                                    </div>
                                    <button type="button" class="btn btn-tea" onclick="createTeaAsset()">创建</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 更新资产信息 -->
                    <div class="tab-pane fade" id="update" role="tabpanel">
                        <div class="card">
                            <div class="card-header">更新茶叶加工信息</div>
                            <div class="card-body">
                                <form id="updateProcessingForm">
                                    <div class="form-group">
                                        <label for="updateBatchId">批次ID</label>
                                        <input type="text" class="form-control" id="updateBatchId" placeholder="输入批次ID">
                                    </div>
                                    <div class="form-group">
                                        <label for="processingInfo">加工信息</label>
                                        <textarea class="form-control" id="processingInfo" rows="3" placeholder="输入加工过程信息，如：杀青温度、揉捻方式等"></textarea>
                                    </div>
                                    <button type="button" class="btn btn-tea" onclick="updateProcessingInfo()">更新加工信息</button>
                                </form>
                            </div>
                        </div>
                        
                        <div class="card mt-3">
                            <div class="card-header">提交质量报告</div>
                            <div class="card-body">
                                <form id="submitQualityForm">
                                    <div class="form-group">
                                        <label for="qualityBatchId">批次ID</label>
                                        <input type="text" class="form-control" id="qualityBatchId" placeholder="输入批次ID">
                                    </div>
                                    <div class="form-group">
                                        <label for="qualityReport">质量报告</label>
                                        <textarea class="form-control" id="qualityReport" rows="3" placeholder="输入质量检测报告，如：茶多酚含量、卫生指标等"></textarea>
                                    </div>
                                    <button type="button" class="btn btn-tea" onclick="submitQualityReport()">提交质量报告</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 资产流转 -->
                    <div class="tab-pane fade" id="transfer" role="tabpanel">
                        <div class="card">
                            <div class="card-header">开始运输</div>
                            <div class="card-body">
                                <form id="startTransportingForm">
                                    <div class="form-group">
                                        <label for="transportBatchId">批次ID</label>
                                        <input type="text" class="form-control" id="transportBatchId" placeholder="输入批次ID">
                                    </div>
                                    <div class="form-group">
                                        <label for="carrier">运输方地址</label>
                                        <input type="text" class="form-control" id="carrier" placeholder="输入运输方的区块链地址">
                                    </div>
                                    <button type="button" class="btn btn-tea" onclick="startTransporting()">开始运输</button>
                                </form>
                            </div>
                        </div>
                        
                        <div class="card mt-3">
                            <div class="card-header">标记为已售出</div>
                            <div class="card-body">
                                <form id="markAsSoldForm">
                                    <div class="form-group">
                                        <label for="soldBatchId">批次ID</label>
                                        <input type="text" class="form-control" id="soldBatchId" placeholder="输入批次ID">
                                    </div>
                                    <div class="form-group">
                                        <label for="buyer">买家地址</label>
                                        <input type="text" class="form-control" id="buyer" placeholder="输入买家的区块链地址">
                                    </div>
                                    <button type="button" class="btn btn-tea" onclick="markAsSold()">标记为已售出</button>
                                </form>
                            </div>
                        </div>
                        
                        <div class="card mt-3">
                            <div class="card-header">转移所有权</div>
                            <div class="card-body">
                                <form id="transferOwnershipForm">
                                    <div class="form-group">
                                        <label for="transferBatchId">批次ID</label>
                                        <input type="text" class="form-control" id="transferBatchId" placeholder="输入批次ID">
                                    </div>
                                    <div class="form-group">
                                        <label for="newOwner">新所有者地址</label>
                                        <input type="text" class="form-control" id="newOwner" placeholder="输入新所有者的区块链地址">
                                    </div>
                                    <button type="button" class="btn btn-tea" onclick="transferOwnership()">转移所有权</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="text-center mt-3 mb-5">
            <small class="text-muted">© 2025 茶叶资产溯源管理系统 - 基于FISCO BCOS区块链技术</small>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    <script src="js/tea-asset.js"></script>
</body>
</html> 